import React, { Component } from 'react'
import axios from 'axios';
import '../css/cinema.css'
import BScroll from 'better-scroll';

export default class Cinema extends Component {
  myref = React.createRef();
  state = {
    list: [],
    anolist:[],
  };
  constructor(){
    super();
    axios({
        url:'https://m.maizuo.com/gateway?cityId=440300&ticketFlag=1&k=3293880',
        headers:{
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"165294070798642513887233","bc":"110100"}',
          'X-Host': 'mall.film-ticket.cinema.list'
        }
    }).then(res => {
        console.log(res.data.data.cinemas)
          this.setState({
            list: res.data.data.cinemas,
            anolist: res.data.data.cinemas
          },()=>{
            new BScroll('.wrapper',{
              scrollbar: true
            })
          })
    });
  };
  filterCinemas(value){
    var newlist = this.state.anolist.filter(item => item.name.toUpperCase().includes(value.toUpperCase())||item.address.toUpperCase().includes(value.toUpperCase()));
    this.setState({
      list:newlist
    })
  };
  render() {
    return (
      <div className='father'>
        <input ref={this.myref} placeholder='请输入影院名称进行搜索' 
        onInput={()=>this.filterCinemas(this.myref.current.value)}></input>
          <div className="wrapper" style={{height:'750px', overflow:'hidden',marginTop:'40px'}}>
            <div className='content'>
              {this.state.list.map(item =>
              <div key={item.id} className = 'mother'>
                <div className="oneclock">
                  <div className='name'>{item.name}</div>
                  <div className='address'>{item.address}</div>
                </div>
                <div className='twoclock'>
                  <div className='price'>￥<span className='nigu'>{parseFloat(item.lowPrice/100)}</span>起</div>
                  <div className='distance'>{item.Distance.toFixed(2)}km</div>
                </div>
              </div>
              )}
            </div>
          </div>
      </div>
    )
  }
}
